<template>
  <div>
    <el-container>
      <el-header style="padding: 0;">
        <el-menu 
        mode="horizontal" 
        default-active="1"
        text-color="#333"
        active-text-color="#E6A23C"
        >
            <el-menu-item index="1">管理员后台</el-menu-item>
            <el-menu-item index="2">站内信</el-menu-item>
            <el-menu-item index="3">客服平台</el-menu-item>
            <el-menu-item index="4">规则中心</el-menu-item>
            <el-menu-item index="5">商家管理</el-menu-item>
            <el-menu-item index="6">下载客户端</el-menu-item>
            <el-menu-item index="7">厂家管理</el-menu-item>
         </el-menu>
      </el-header>
      <el-container >
        <el-aside width="200px" class="demo">
            <el-menu
            router  
            :default-active="$route.path"
            style="height: calc(100vh - 60px);"
            >
            <el-menu-item index="/component/a"><i class="el-icon-s-home"></i>后台首页</el-menu-item>
            <el-menu-item index="/component/b"><i class="el-icon-s-order"></i> 数据管理</el-menu-item>
            <el-menu-item index="/component/c"><i class="el-icon-document"></i> 内容管理</el-menu-item>
            <el-menu-item index="/component/Table"><i class="el-icon-document"></i> 表单</el-menu-item>
         </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
     .el-menu--horizontal{
        // background-color:#423e3e;
        background-image: linear-gradient(#dbd1d1,#409EFF);
     }
    //  滚动条样式demo
     .demo::-webkit-scrollbar{
        // 滚动条整体样式
        width: 3px;
     }
     .demo::-webkit-scrollbar-thumb{
        // 滚动条里面小方块
        width: 3px;
        background: #409EFF;
     }
     .demo::-webkit-scrollbar-track{
        // 滚动条里面轨道
        width: 3px;
        background: #fff0;
     }
</style>